<template>
	<div ref="MonitorBarGroud" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, PropType, ref, Ref, reactive, watchEffect} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'MonitorBarGroud',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			height: {
				type: String as PropType<string>,
				default: '280px',
			},
			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			seriesColor: {
				type: String,
				default: '#1890ff',
			},
			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		},
		setup(props) {
			let xLabel = ['语文', '数学', '英语', '科学', '历史'];
			const MonitorBarGroud = ref<HTMLDivElement | null>(null);
			const {setOptions, echarts} = useECharts(MonitorBarGroud as Ref<HTMLDivElement>);
			const option = reactive({
				// tooltip: {
				//   trigger: 'axis',
				//   axisPointer: {
				//     type: 'shadow',
				//     label: {
				//       show: true,
				//       backgroundColor: '#333',
				//     },
				//   },
				// },
				tooltip: {},
				// backgroundColor: '#0f375f',
				animation: false,
				grid: {
					top: '15%',
					left: '6%',
					right: '3%',
					bottom: '20%', //也可设置left和right设置距离来控制图表的大小
				},
				xAxis: {
					name: '月度',
					data: xLabel,
					axisLine: {
						show: true, //隐藏X轴轴线
						lineStyle: {
							color: '#cbcbcb',
						},
					},
					axisTick: {
						show: false, //隐藏X轴刻度
					},
					axisLabel: {
						show: true,
						margin: 14,
						fontSize: 12,
						textStyle: {
							color: 'rgb(125, 133, 144)', //X轴文字颜色
						},
					},
				},
				yAxis: [
					{
						name: '充电量（万度）',
						nameTextStyle: {
							color: 'rgb(125, 133, 144)', //
							fontSize: 16,
							align: 'center', //文字位置

							padding: [0, 0, 0, 20], //表示 [上, 右, 下, 左] 的边距。
						},

						// left: '-80px',
						type: 'value',
						
					},
				],
				series: [
					{
						name: '充电量',
						type: 'bar',
						barWidth: 30,
						itemStyle: {
							normal: {
								// barBorderRadius: 100,
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: '#e8c73e',
									},
									{
										offset: 1,
										color: '#f7ebb9',
									},
								]),
							},
						},
						data: [20, 80, 100, 40, 34, 90, 60],
						z: 10,
						zlevel: 0,
						label: {
							// show: true,
							position: 'top',
							distance: 10,
							fontSize: 16,
							color: '#01fff4',
						},
					},
					{
						// 分隔
						type: 'pictorialBar',
						itemStyle: {
							normal: {
								color: '#fff',
							},
						},
						symbolRepeat: 'fixed',
						symbolMargin: 3,
						symbol: 'rect',
						symbolClip: true,
						symbolSize: [31, 6],
						symbolPosition: 'start',
						symbolOffset: [0, -1],
						// symbolBoundingData: this.total,
						data: [20, 80, 100, 40, 34, 90, 60],
						width: '100%',
						z: 0,
						zlevel: 1,
					},
				],
			});

			watchEffect(() => {
				props.chartData && initCharts();
			});

			function initCharts() {
				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}
				let seriesData = props.chartData.map((item) => {
					return item.value;
				});
				let xAxisData = props.chartData.map((item) => {
					return item.name;
				});
				option.series[0].data = seriesData;
				option.series[1].data = seriesData;
				// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
				option.series[0].color = props.seriesColor;
				// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
				option.xAxis.data = xAxisData;
				setOptions(option);
			}
			return {MonitorBarGroud};
		},
	});
</script>
